<template>
<div class="body">
  <div class="login_dailog">
    <el-card>
      <h2 class="title"><img :src="imgUrl+'logo.png'"/> 交友网</h2>
      <br/>
      <el-form :model="from" label-width="60px" class="login_from">
        <el-form-item label="名字">
          <el-input
            v-model="from.name"
            placeholder="请输入姓名"
            @keydown.enter.native="onSubmit()"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input el-input v-model="from.pass" placeholder="请输入密码" @keydown.enter.native="onSubmit()"></el-input>
        </el-form-item>

        <div class="btn_groud">
          <el-button type="primary" @click="onSubmit()">登录</el-button>
          <el-button @click="openLogon()">注册</el-button>
        </div>
      </el-form>
    </el-card>

    <el-dialog
      title="注册"
      :visible.sync="showLogon"
      id="logon_view"
      width="98vw"
    >
      <el-form :v-model="logonInfo" label-width="60px">
        <el-row>
          <el-col :span="6">
            <img :src='logonInfo.img?url+logonInfo.img:``'/>
          </el-col>
          <el-col :span="18">
            <el-form-item label="">
              <el-input
                type="textarea"
                size="small"
                v-model="logonInfo.introduction"
                placeholder="介绍"
                rows="4"
                maxlength="30"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称">
              <el-input size="small" v-model="logonInfo.name" maxlength="10" placeholder="名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄">
              <el-input size="small" v-model="logonInfo.age" placeholder="年龄"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input size="small" v-model="logonInfo.email" placeholder="名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址">
              <el-input size="small" v-model="logonInfo.address" placeholder="年龄"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="微信">
              <el-input size="small" v-model="logonInfo.vx" placeholder="名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-input size="small" v-model="logonInfo.sex" placeholder="性别"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="兴趣">
              <el-input size="small" v-model="logonInfo.interest" placeholder="兴趣"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码">
              <el-input size="small" v-model="logonInfo.pass" placeholder="密码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="btn_groud">
          <el-button size="small" type="primary" @click="submit()">保存</el-button>
          <el-button size="small" @click="close">返回</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</div>
</template>

<script>
import { Login, logon } from './api'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      from: {
        name: '',
        pass: ''
      },
      UserInfo: {},
      showLogon: false,
      imgUrl: 'http://123.57.249.44/imgs/',
      logonInfo:{}
    }
  },
  methods: {
    onSubmit() {
      Login(this.from).then(res => {
        if ( res.data.login === 1 ) {
          this.UserInfo = res.data.data.info
          localStorage.setItem('user', JSON.stringify(this.UserInfo))
          this.$router.push({path: '/home/' + this.UserInfo.uid })
        } else {
          Message({ message: '账号密码错误！', type: 'error', duration: 5 * 1000, showClose: false, dangerouslyUseHTMLString: true })
        }
      })
    },
    openLogon() {
      this.showLogon = true
    },
    close() {
      this.showLogon = false
    },
    submit() {
      const data = this.logonInfo
      console.log(data)
      logon(data).then(res => {
        if( res.data.data.state === 'succ' ){
          this.$message({
            message: '注册成功!',
            type: 'success'
          });
          this.from = res.data.data.info
          this.onSubmit()
        } else {
          this.$message({
            message: '服务器出错！',
            type: 'error'
          });
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.body{
  height: 100vh;
  background-image: url('../assets/hhh.jpg');
  background-size: cover;
}
.login_dailog{
  width: 650px;
  margin: auto;
  position: relative;
  top: 15vh;

  .title {
    color: rgb(66, 66, 66);
    border-left: 5px solid rgb(168, 168, 168);
    padding-left: 20px;
  }

  .btn_groud {
    margin-top: 10px;
    display: flex;
    justify-content: right;
  }

}

// 手机端适配
@media screen and (max-width: 750px) {
  .login_dailog {
    width: 98%;
    margin: auto;
  }
  
  #logon_view {
    &:first-child {
      margin-top: 5vh;
      width: 95vw;
      height: 90vh;
    }
  }
}
</style>